<template>
  <!-- 表单界面 -->
  <div>
    <div>
      <div>
        <van-field v-model="from.username" autocomplete="new-password" label="用户名" placeholder="用户名" />
        <van-field v-model="from.password" type="password" label="密码" placeholder="密码" />
        <van-radio-group v-model="from.radio">
          <van-radio name="1">单选框 1</van-radio>
          <van-radio name="2">单选框 2</van-radio>
        </van-radio-group>
        <br />
        <van-checkbox v-model="from.checked">复选框</van-checkbox>
        <br />
        <van-switch size="20px" v-model="from.checkedS"></van-switch>
        <van-stepper v-model="from.stepper" />
        <br />
        <van-rate v-model="from.rate" />
        <van-slider v-model="from.slider" @change="onChange" />
        <div class="A-show"> 当前滑块值{{ from.slider }} </div>

        <div class="A-paashow">
          <div> 省市区联动选择 </div>
          <div @click="show2 = true" :class="from.Province ? 'a' : 'b'"> {{ from.Province ? from.Province + '-' + from.City + '-' + from.Area : '当前位置' }} </div>
        </div>
        <div class="A-paashow">
          <div> 时间选择 </div>
          <div @click="timeshow = true" :class="from.datetime ? 'a' : 'b'"> {{ from.datetime ? from.datetime : '选择时间' }} </div>
        </div>

        <!-- 图片上传 -->
        <div>
          <div>
            <div>
              <van-uploader v-model="fileList" :before-read="beforeread" :after-read="afterRead" />
            </div>
          </div>
        </div>

        <!-- 自增数据 -->
        <div>
          <div v-for="(d, index) in Increase" :key="index">
            <input type="text" v-model="d.name" />
            <input type="text" v-model="d.show" />
            <input type="text" v-model="d.infoa" />
            <button @click="delzhi(index)">删除</button>
          </div>
          <button @click="addIncrease">新增</button>
        </div>
        <br />
        <!-- 数组提交成对象 -->
        <div @click="addjsin"><button>数据点击提交json</button></div>
        <br />

        <div @click="addfrom">
          <van-button loading-text="加载中..." :loading="loading" size="large" type="primary">提交</van-button>
        </div>
      </div>
    </div>

    <!-- 省市区 -->
    <div>
      <van-popup v-model="show2" position="bottom">
        <van-area @cancel="show2 = false" title="标题" :area-list="areaList" @confirm="confirm" />
      </van-popup>
    </div>

    <!-- 时间选择器 -->
    <van-popup v-model="timeshow" position="bottom">
      <van-datetime-picker @confirm="confirm2" v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" />
    </van-popup>

    <!-- 底部导航界面 -->
    <Tabber :num="2"></Tabber>
  </div>
</template>
<script>
import { Hybrid } from '@/js/DigitGroup'; // 基本数据封装
import Tabber from '../Tabber.vue'; // 底部导航
import { areaList } from '@vant/area-data'; // 省市区数据
import { fileName } from '@/js/Encryption'; // 图片上传uid
import { Uploader, Form, Button, DatetimePicker, Field, Popup, RadioGroup, Radio, Checkbox, CheckboxGroup, Switch, Stepper, Rate, Slider, Picker, Area } from 'vant';
export default {
  name: 'forminfo',
  filters: {
    timefu(info) {
      return info ? `${y}-${m}-${d}` : `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    },
  },
  components: {
    Tabber,
    [Button.name]: Button,
    [Form.name]: Form,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Switch.name]: Switch,
    [Stepper.name]: Stepper,
    [Rate.name]: Rate,
    [Slider.name]: Slider,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [DatetimePicker.name]: DatetimePicker,
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      Increase: [], // 自增数据
      qiniuData: {
        token: '', //七牛上传token
        key: '', //上传后的文件名称
        host: '', //上传完成后需要拼接的域名
      },
      fileList: [],
      listundata: [], // 图片上传成功参数
      minDate: new Date(2020, 0, 1), // 开始时间
      maxDate: new Date(2025, 10, 1), // 结束时间
      currentDate: new Date(2021, 0, 17),
      areaList,
      show2: false, // 省市区选择弹框
      loading: false, // 按钮加载
      timeshow: false, // 时间选择器
      show: false,
      // 表单值
      from: {
        radio: '1',
        checked: true,
        username: '',
        password: '',
        checkedS: false,
        stepper: 1,
        rate: 0,
        slider: 0,
        Province: '',
        City: '',
        Area: '',
        datetime: '',
        duixiang: {},
      },
      num: -1,
    };
  },
  methods: {
    // 删除
    delzhi(index) {
      this.Increase.splice(index, 1);
      this.from = this.del(this.from, [`duixiang[${index}]name`, `duixiang[${index}]show`, `duixiang[${index}]infoa`]);
    },
    // 删除对象中的键值
    del(obj, keys) {
      keys.map((res) => {
        delete obj[res];
      });
      return obj;
    },
    addIncrease() {
      this.Increase.push({
        name: '',
        show: '',
        infoa: '',
      });
    },
    // 测试json
    addjsin() {
      for (let i = 0; i < this.Increase.length; i++) {
        this.from[`duixiang[${i}]name`] = this.Increase[i].name;
        this.from[`duixiang[${i}]show`] = this.Increase[i].show;
        this.from[`duixiang[${i}]infoa`] = this.Increase[i].infoa;
      }
      Hybrid(this.from);
      this.$ajax('?s=Manage.User.OpenCard', this.from, function (res) {
        console.log(res);
        alert('会提交失败但是不用管，看network下面的form data值就好');
      });
    },
    // 上传成功
    afterRead(file) {
      let params = new FormData();
      params.append('file', file.file);
      params.append('key', this.qiniuData.key);
      params.append('token', this.qiniuData.token);
      this.$post2('http://upload-z2.qiniup.com', params).then((res) => {
        this.listundata.push(this.qiniuData.host + res.key);
        console.log(this.listundata.join(','));
      });
    },
    // 七流云上传前获取token和host
    beforeread(file) {
      this.qiniuData.key = fileName(file.name);
      return new Promise((resolve, reject) => {
        let that = this;
        // post
        // let img = that.$ajax('?s=Manage.Upload.QiniuToken', {}, function (res) {
        //   if (res.code == 200) {
        //     that.qiniuData.token = res.data.token;
        //     that.qiniuData.host = res.data.host;
        //     resolve(img);
        //   } else {
        //     reject(res.msg);
        //   }
        // });
        // get
        let img = that.$get('?s=Manage.Upload.QiniuToken', {}).then((res) => {
          if (res.code == 200) {
            that.qiniuData.token = res.data.token;
            that.qiniuData.host = res.data.host;
            resolve(img);
          } else {
            reject(res.msg);
          }
        });
      });
    },
    // 省市区选择事件
    confirm(e) {
      console.log(e);
      this.from.Province = e[0].name;
      this.from.City = e[1].name;
      this.from.Area = e[2].name;
      this.show2 = false;
    },
    confirm2(e) {
      const a = new Date(e).getTime() / 1000;
      const dt = new Date(a * 1000);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + '').padStart(2, '0');
      const d = (dt.getDate() + '').padStart(2, '0');
      this.timeshow = false;
      this.from.datetime = `${y}-${m}-${d}`; // 拿到返回值
    },
    // 滑块事件
    onChange(value) {
      this.from.slider = value;
    },
    // 表单点击事件
    addfrom() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        console.log('我是表单提交的值', this.from);
      }, 1000);
    },
  },
};
</script>
<style scoped>
.A-show {
  padding-top: 18px;
}
.A-paashow {
  display: flex;
  justify-content: space-between;
  padding: 12px 0px 0px 0px;
}
.a {
  color: #333;
}
.b {
  color: #bcbcbc;
}
</style>
